<template>
	<view class="container">
		<form @submit="submitForm">
			<view class="form-item">
				<text class="label">二维码：</text>
				<input type="text" v-model="formData.qrCode" placeholder="请输入资产二维码" />
			</view>
			<view class="form-item">
				<text class="label">条形码：</text>
				<input type="text" v-model="formData.barcode" placeholder="请输入资产条形码" />
			</view>
			<view class="form-item">
				<text class="label">资产编号：</text>
				<input type="text" v-model="formData.code" placeholder="请输入资产编号" />
			</view>

			<view class="form-item">
				<text class="label">资产类型：</text>
				<picker mode="selector" :range="assetTypes" range-key="name" @change="onAssetTypeChange">
					<view class="picker">
						{{ formData.typeName || '请选择资产类型' }}
					</view>
				</picker>
			</view>

			<!-- 	<view class="form-item">
				<text class="label">序列号类型：</text>
				<input type="text" v-model="formData.snTypeId" placeholder="请输入序列号类型" />
			</view> -->
			<view class="form-item">
				<text class="label">序列号类型：</text>
				<picker mode="selector" :range="assetSnTypes" range-key="name" @change="onAssetSnTypesChange">
					<view class="picker">
						{{ formData.snTypeName || '请选择序列号类型' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">序列号：</text>
				<button class="option-but" @click="scanCamera">扫码</button>
				<input type="text" v-model="formData.sn" placeholder="请输入序列号" />
			</view>

			<view class="form-item">
				<text class="label">品牌型号：</text>
				<picker mode="multiSelector" :range="brandModelRange" range-key="name" @columnchange="columnChange"
					@change="pickerChange" class="picker">
					<view class="picker-view">
						<text>{{ selectedValue }}</text>
						<view class="jiantou"></view>
					</view>
				</picker>
			</view>
			<!-- <view class="form-item">
				<text class="label">品牌：</text>
				<picker mode="multiSelector" :range="assetBrands" range-key="name" @change="onAssetBrandChange">
					<view class="picker">
						{{ formData.brandName || '请选择品牌' }}
					</view>
				</picker>
			</view> -->

			<!-- <view class="form-item">
				<text class="label">型号：</text>
				<picker mode="selector" :range="assetMods" range-key="name" @change="onAssetModChange">
					<view class="picker">
						{{ formData.brandName || '请选择型号' }}
					</view>
				</picker>
			</view> -->

			<view class="form-item">
				<text class="label">cpu：</text>
				<input type="text" v-model="formData.cpu" placeholder="请输入cpu" />
			</view>

			<view class="form-item">
				<text class="label">内存：</text>
				<input type="text" v-model="formData.ram" placeholder="请输入内存" />
			</view>

			<view class="form-item">
				<text class="label">内存类型：</text>
				<picker mode="selector" :range="assetRamTypes" range-key="name" @change="onAssetRamTypesChange">
					<view class="picker">
						{{ formData.ramTypeName || '请选择内存类型' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">磁盘空间：</text>
				<input type="text" v-model="formData.rom" placeholder="请输入磁盘空间" />
			</view>

			<!-- <view class="form-item">
				<text class="label">磁盘类型：</text>
				<input type="text" v-model="formData.romType" placeholder="请输入磁盘类型" />
			</view> -->

			<view class="form-item">
				<text class="label">磁盘类型：</text>
				<picker mode="selector" :range="assetRomTypes" range-key="name" @change="onAssetRomTypesChange">
					<view class="picker">
						{{ formData.romTypeName || '请选择磁盘类型' }}
					</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="label">存放区域：</text>
				<picker mode="multiSelector" :range="assetAreaLocationRange" range-key="name"
					@columnchange="columnAreaLocationChange" @change="pickerAreaLocationChange" class="picker">
					<view class="picker-view">
						<text>{{ selectedAreaLocationValue }}</text>
						<view class="jiantou"></view>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">公司部门：</text>
				<picker mode="multiSelector" :range="assetCompanySectionRange" range-key="name"
					@columnchange="columnCompanySectionChange" @change="pickerCompanySectionChange" class="picker">
					<view class="picker-view">
						<text>{{ selectedCompanySectionValue }}</text>
						<view class="jiantou"></view>
					</view>
				</picker>
			</view>


			<!-- 	<view class="form-item">
				<text class="label">使用人：</text>
				<input type="text" v-model="formData.userid" placeholder="请输入选择使用人" />
			</view> -->

			<view class="form-item">
				<text class="label">使用人：</text>
				<picker mode="selector" :range="assetUsers" range-key="name" @change="onAssetUserChange">
					<view class="picker">
						{{ formData.userName || '请选择使用人' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">资产状态：</text>
				<picker mode="selector" :range="assetStatus" range-key="name" @change="onAssetStatusChange">
					<view class="picker">
						{{ formData.statusName || '请选择资产状态' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">资产性质：</text>
				<picker mode="selector" :range="assetNatures" range-key="name" @change="onAssetNaturesChange">
					<view class="picker">
						{{ formData.natureName || '请选择资产性质' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">是否贴标：</text>
				<picker mode="selector" :range="assetLabels" range-key="name" @change="onassetLabelsChange">
					<view class="picker">
						{{ formData.labelName || '请选择是否贴标' }}
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="label">资产描述：</text>
				<textarea v-model="formData.note" placeholder="请输入资产描述" />
			</view>

			<view class="form-item">
				<button formType="submit">提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {

				formData: {
					id: '',
					typeId: '',
					typeName: '',
					qrCode: '',
					barCode: '',
					code: '',
					snTypeId: '',
					snTypeName: '',
					sn: '',
					brandId: '',
					brandName: '',
					modId: '',
					modName: '',
					cpu: '',
					ram: '',
					ramType: '',
					ramTypeName: '',
					rom: '',
					romName: '',
					romType: '',
					areaId: '',
					locationId: '',
					companyId: '',
					sectionId: '',
					userId: '',
					statusId: '',
					statusName: '',
					natureId: '',
					natureName: '',
					label: '',
					labelName: '',
					name: '',
					note: ''
				},
				assetUsers: [],
				assetTypes: [],
				assetSnTypes: [],
				assetStatus: [],
				assetNatures: [],
				assetRomTypes: [{
					id: 1,
					name: "HDD-机械"
				}, {
					id: 2,
					name: "SSD-固态"
				}],
				assetRamTypes: [{
					id: 3,
					name: "DDR3"
				}, {
					id: 4,
					name: "DDR4"
				}, {
					id: 5,
					name: "DDR5"
				}],
				assetLabels: [{
					id: 1,
					name: "是"
				}, {
					id: 0,
					name: "否"
				}],

				assetCompanySectionData: [],
				assetCompanySectionRange: [],
				selectedCompanySectionValue: '请选择公司部门', // 当前选中的值

				assetAreaLocationData: [],
				assetAreaLocationRange: [],
				selectedAreaLocationValue: '请选择存放区域', // 当前选中的值

				brandModelData: [], // 品牌型号的级联数据
				brandModelRange: [], // 封装好的品牌型号下拉
				// selectedIndexes: [0, 0], // 当前选中的索引
				selectedValue: '请选择品牌和型号', // 当前选中的值
				// selectedIds: [null, null], // 当前选中的品牌和型号的id
			};
		},
		onLoad(options) {
			this.getBrandModelData()
			console.log("----------------------type:",options.type)
			switch (options.type) {
				case "QR_CODE":
					this.formData.qrCode = options.id
				case "EAN_13":
					this.formData.barcode = options.id
				default:
					console.log("无效的输入")
			}
		},
		methods: {
			// 获取品牌型号数据
			getBrandModelData() {

				this.$http.get('/assetType/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {

						this.assetTypes = response.data;
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});


				this.$http.get('/assetStatus/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {

						this.assetStatus = response.data;
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});

				this.$http.get('/area/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {

						this.assetAreas = response.data;
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});

				this.$http.get('/areaLocation/areaLocationList', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {

						this.assetAreaLocationData = response.data;
						if (this.assetAreaLocationData.length > 0) {
							// 初始化多列选择器的数据
							this.assetAreaLocationRange = [
								this.assetAreaLocationData,
								this.assetAreaLocationData[0].areaLocationList,
							];
						}
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});


				this.$http.get('/assetBrandMod/brandModlist', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {

						this.brandModelData = response.data;
						if (this.brandModelData.length > 0) {
							// 初始化多列选择器的数据
							this.brandModelRange = [
								this.brandModelData,
								this.brandModelData[0].modList,
							];
						}
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});



				this.$http.get('/assetCompanySection/csList', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {

						this.assetCompanySectionData = response.data;
						if (this.assetCompanySectionData.length > 0) {
							// 初始化多列选择器的数据
							this.assetCompanySectionRange = [
								this.assetCompanySectionData,
								this.assetCompanySectionData[0].csList,
							];
						}
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});


				this.$http.get('/assetSnType/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {
						this.assetSnTypes = response.data;
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});

				this.$http.get('/assetUser/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {
						this.assetUsers = response.data;
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});

				this.$http.get('/assetNature/list', {}, false, '加载中...') // 参数说明：url、查询参数、是否需要认证、加载提示
					.then(response => {
						this.assetNatures = response.data;
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});
			},
			scanCamera: function() {
				console.log("进入扫码方法")
				uni.scanCode({
					scanType: 'barCode',
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.formData.sn = res.result;
					},
				})
				// #ifdef H5
				console.log("H5端扫描")
				// this.getH5Qrcode()
				// this.imgUp()
				// #endif
			},
			// 列变化时触发
			columnCompanySectionChange(e) {
				const {
					column,
					value
				} = e.detail;
				// console.log("detail:", e.detail)
				// this.selectedIndexes[column] = value;

				// 更新第二列数据
				if (column === 0) {
					// this.selectedIndexes[1] = 0; // 重置型号选择
					this.assetCompanySectionRange[1] = this.assetCompanySectionData[value].csList;

					// 默认为首行的id
					if (this.assetCompanySectionRange[column][value].csList[0].length > 0) {
						this.formData.locationId = this.assetCompanySectionRange[column][value].csList[0].id;
					}
				}

				// 更新选中的id
				this.formData.areaId = this.assetCompanySectionRange[column][value].id;
			},
			// 点击确定按钮时触发
			pickerCompanySectionChange(e) {
				const {
					value
				} = e.detail;
				console.log("选中的index：", e.detail)

				// console.log("选中的this.assetCompanySectionRange[0][value[0]].name：",this.assetCompanySectionRange[0][value[0]].name)
				// console.log("选中的this.assetCompanySectionRange[1][value[1]].name：",this.assetCompanySectionRange[0][value[0]].name)
				// 更新选中的值
				const brand = this.assetCompanySectionRange[0][value[0]].name;
				const model = this.assetCompanySectionRange[1][value[1]].name;
				this.selectedCompanySectionValue = `${brand} - ${model}`;

				this.formData.areaId = this.assetCompanySectionRange[0][value[0]].id;
				this.formData.locationId = this.assetCompanySectionRange[1][value[1]].id;
			},

			// 列变化时触发
			columnAreaLocationChange(e) {
				const {
					column,
					value
				} = e.detail;
				// console.log("detail:", e.detail)
				// this.selectedIndexes[column] = value;

				// 更新第二列数据
				if (column === 0) {
					// this.selectedIndexes[1] = 0; // 重置型号选择
					this.assetAreaLocationRange[1] = this.assetAreaLocationData[value].areaLocationList;

					// 默认为首行的id
					if (this.assetAreaLocationRange[column][value].areaLocationList[0].length > 0) {
						this.formData.locationId = this.assetAreaLocationRange[column][value].areaLocationList[0].id;
					}
				}

				// 更新选中的id
				this.formData.areaId = this.assetAreaLocationRange[column][value].id;
			},
			// 点击确定按钮时触发
			pickerAreaLocationChange(e) {
				const {
					value
				} = e.detail;
				// this.selectedIndexes = value;

				// 更新选中的值
				const brand = this.assetAreaLocationRange[0][value[0]].name;
				const model = this.assetAreaLocationRange[1][value[1]].name;
				this.selectedAreaLocationValue = `${brand} - ${model}`;

				this.formData.areaId = this.assetAreaLocationRange[0][value[0]].id;
				this.formData.locationId = this.assetAreaLocationRange[1][value[1]].id;
			},
			// 列变化时触发
			columnChange(e) {
				const {
					column,
					value
				} = e.detail;
				// console.log("detail:", e.detail)
				// this.selectedIndexes[column] = value;

				// 更新第二列数据
				if (column === 0) {
					// this.selectedIndexes[1] = 0; // 重置型号选择
					this.brandModelRange[1] = this.brandModelData[value].modList;

					// 默认为首行的id
					if (this.brandModelRange[column][value].modList[0].length > 0) {
						this.formData.modId = this.brandModelRange[column][value].modList[0].id;
					}
				}

				// 更新选中的id
				// this.selectedIds[column] = this.brandModelRange[column][value].id;
				this.formData.brandId = this.brandModelRange[column][value].id;
			},
			// 点击确定按钮时触发
			pickerChange(e) {
				const {
					value
				} = e.detail;

				// 更新选中的值
				const brand = this.brandModelRange[0][value[0]].name;
				const model = this.brandModelRange[1][value[1]].name;
				this.selectedValue = `${brand} - ${model}`;
				// 更新选中的id
				this.formData.brandId = this.brandModelRange[0][value[0]].id;
				this.formData.modId = this.brandModelRange[1][value[1]].id;
			},
			onAssetUserChange(event) {
				const obj = this.assetUsers[event.detail.value];
				this.formData.userName = obj.name;
				this.formData.userId = obj.id;
			},
			onAssetSnTypesChange(event) {
				const obj = this.assetSnTypes[event.detail.value];
				this.formData.snTypeName = obj.name;
				this.formData.snTypeId = obj.id;
			},
			onAssetTypeChange(event) {
				const obj = this.assetTypes[event.detail.value];
				this.formData.typeName = obj.name;
				this.formData.typeId = obj.id;
			},
			onAssetStatusChange(event) {
				const obj = this.assetStatus[event.detail.value];
				this.formData.statusName = obj.name;
				this.formData.statusId = obj.id;
			},
			onAssetRomTypesChange(event) {
				const obj = this.assetRomTypes[event.detail.value];
				this.formData.romName = obj.name;
				this.formData.rom = obj.id;
			},
			onAssetRamTypesChange(event) {
				const obj = this.assetRamTypes[event.detail.value];
				this.formData.ramTypeName = obj.name;
				this.formData.ramType = obj.id;
			},
			onAssetNaturesChange(event) {
				const obj = this.assetNatures[event.detail.value];
				this.formData.natureName = obj.name;
				this.formData.natureId = obj.id;
			},
			onassetLabelsChange(event) {
				const obj = this.assetLabels[event.detail.value];
				this.formData.labelName = obj.name;
				this.formData.label = obj.id;
			},
			submitForm() {

				console.log('提交的表单数据：', this.formData);
				// 验证表单数据

				if (!this.formData.id && !this.formData.qrCode && !this.formData.barCode) {
					uni.showToast({
						title: '【资产编号】能为空',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.code) {
					uni.showToast({
						title: '【资产编号】能为空',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.typeId) {
					uni.showToast({
						title: '请选择【资产类型】',
						icon: 'none'
					});
					return;
				}
				if (!this.formData.statusId) {
					uni.showToast({
						title: '请选择【资产状态】',
						icon: 'none'
					});
					return;
				}


				this.$http.post("/asset/add", this.formData, false)
					.then(response => {
						// 提交表单数据
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						uni.navigateBack({
							delta: 1
						})
					})
					.catch(err => {
						console.error('请求失败：', err);
						// 在这里处理错误
						uni.showToast({
							title: '请求失败，请稍后重试',
							icon: 'none'
						});
					});
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		font-weight: bold;
	}

	.picker {
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	textarea {
		width: 100%;
		height: 100px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 10px;
	}

	button {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		background-color: #007aff;
		color: white;
		border-radius: 5px;
	}

	.container {
		padding: 20px;
	}

	.picker-view {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jiantou {
		width: 0;
		height: 0;
		border-top: 5px solid transparent;
		border-bottom: 5px solid #000;
	}
</style>